<template>
  <div class="warp">
    <div class="btn-box">
      <!-- <button @click="clear()">清空画布</button> -->
      <button @click="init()">点击载入图片和数据</button>
      <!-- <button @click="update()">换一张</button> -->
      <button @click="select(69)">选中</button>
      <!-- <button @click="select('125')">选中</button>
      <button @click="select('1236')">选中</button> -->
      <button @click="discardActiveObject()">取消</button>
    </div>
    <div class="content">
      <div class="drawlabel-box">
        <ocr-drawlabel  ref="addrawlabel" :id="'addrawlabel'" :options="option"  @updatedObject="updatedObject" @addedObject="addedObject" @deleteObject="deleteObject"  @selectedObject="selectedObject"></ocr-drawlabel>
      </div>
      <div class="right-box">
        <el-card v-for="(item, index) in data3" :key="index" class="box-card">
          <div slot="header" class="clearfix">
            ID：<span :class="item.objectId.toString().length>6 && 'fs12'">{{item.objectId}}</span>
            <el-button style="float: right; padding: 3px 0" type="text">删除</el-button>
          </div>
          矩形坐标：
          <div v-for="(coordinate, index) in item.coordinates" :key="index" class="text item flex">
            <span>x: {{ coordinate.x | rounding }}</span> <span>y: {{ coordinate.y | rounding }}</span>
          </div>
          
          <div v-if="item.columnList"> 表格横线坐标：
            
            <div v-for="(x, index) in item.columnList" :key="index" class="text item flex">
              <span>x: {{ x | rounding }}</span>
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import { setTimeout } from 'timers';
export default {
  name:'APP',
  data(){
    return {
      url:"https://testshhzcjcdn.oss-cn-hangzhou.aliyuncs.com/html/wx_pic/fszshzj/qrcode/YF1/ewm-bg.jpg",
      labelDataOrigin: [],
      loadingData: false,
      data1:[],
      option: {
        toolbar: ['rect', 'table', 'select', 'cut', 'delete']
      },
      data3:[
        {
          objectType:'rect',
          objectId:'0',
          coordinates:[
            {x:0,y:0},
            {x:112,y:0},
            {x:112,y:56},
            {x:0,y:56},
          ],
          // columnList:[1030,1100,1200]
        },
        // {
        //   objectType:'table',
        //   objectId:'1',
        //   coordinates:[
        //     {x:1000,y:100},
        //     {x:1300,y:100},
        //     {x:1300,y:300},
        //     {x:1000,y:300},
        //   ],
        //   columnList:[1030,1100,1200]
        // },
        //  {
        //   objectType:'table',
        //   objectId:'2',
        //   coordinates:[
        //     {x:1600,y:500},
        //     {x:1900,y:500},
        //     {x:1900,y:900},
        //     {x:1600,y:900},
        //   ],
        //   columnList:[1720,1800,1880]
        // }, 
        // {
        //   objectType:'rect',
        //   objectId:'3',
        //   coordinates:[
        //     {x:0,y:0},
        //     {x:200,y:0},
        //     {x:200,y:200},
        //     {x:0,y:200},
        //   ]
        // }
        // , {
        //   objectType:'rect',
        //   objectId:'4',
        //   coordinates:[
        //     {x:500,y:600},
        //     {x:2500,y:600},
        //     {x:2500,y:1660},
        //     {x:500,y:1660},
        //   ]
        // }, 
        // {
        //   objectType:'table',
        //   objectId:'5',
        //   coordinates: [
        //     {x:0,y:0},
        //     {x:1200,y:0},
        //     {x:1200,y:800},
        //     {x:0,y:800},
        //   ],
        //   columnList:[600,1000,1100]
        // }
      ]
    }
  },
  filters: {
    rounding (value) {
      return value.toFixed(2)
    }
  },
  computed: {
    ...mapState('tools', [
      'coordinatesList'
    ])
  },
  methods:{
    selectChange(){
      // let a = val.target.value
    },
      init(){
        // 初始化
        this.$refs.addrawlabel.initCanvas(this.url,this.data3)
        setTimeout(()=>{
          // this.$refs.addrawlabel1.initCanvasSim(this.url,this.data1)
          // // 数据更新
          //  setTimeout(()=>{
          //     this.$refs.addrawlabel1.updataDataSim("https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3331240902,302148632&fm=26&gp=0.jpg",this.data2)
              // 数据更新
            // },300)
        },300)
      },
      update(){
        this.$refs.addrawlabel.updataData(this.url,this.data)
      },
      select(index){
        // 选中某个框
        this.$refs.addrawlabel.selectObject(index)
      },
      discardActiveObject(){
        // 取消选中
        this.$refs.addrawlabel.discardActiveObject()
      },
      // 新增回传 objectId、坐标等数据
      addedObject(e){
        console.log('addedObject',e)
        let object = this.data3.filter(item=>  item.objectId === e.objectId)
        if(object.length > 0) return;
        this.data3.push(e)
      },
      // 删除回传 objectId、坐标等数据
      deleteObject(res) {
        console.log('deleteObject',res)
      },
      // 更新回传 objectId、坐标等数据
      updatedObject(res){
        // console.log('updatedObject',res)
        
         this.data3 = this.data3.map(item=>  {
          if(item.objectId === res.objectId){
            item.coordinates = res.coordinates
            item.columnList = res.columnList
          }
          return item
        })
      },
      // 选中回传 objectId
      selectedObject(e) {
        console.log('selectedObject',e)
      },
      selectObjectSelf(e){
        console.log('selectObjectSelf',e)
      },
      updateData(e) {
        console.log(JSON.parse(e))
      },
      clear(){
        this.$refs.addrawlabel.clearHandler()
        
      }
  }
}
</script>
<style scoped lang="scss">
.warp {
  width: 100vw;
  height :100vh;
  position: absolute;
  .fs12 {
    font-size: 10px;
  }
  .btn-box {
    position: absolute;
    position: fixed;
    top: 0;
    z-index: 100;
    left:50px;
    button {
      margin-left: 5px;
    }
  }
  .content {
    display: flex;
    height: 100%;
    width: 100%;
    .drawlabel-box {
      width: 100%;
      height: 100%;
    }
    .right-box {
      width: 300px;
      height: 100%;
      border-left: 1px solid #ddd;
      overflow:auto;
      .box-card {
        width: 80%;
        margin: 10px auto;
        font-size: 14px;
       ::v-deep .el-card__header {
          padding:8px 20px
        }
        ::v-deep .el-card__body {
          padding:8px 20px;
          color: #999;
          .item {
            color: #333;
            display: flex;
            line-height: 20px;
            span{
              flex: 1;
            }
          }
        }
      }
    }
  }
}

</style>